<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>4.几个注意点</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.关于组件名:
							一个单词组成：
										第一种写法(首字母小写)：school
										第二种写法(首字母大写，推荐)：School
							多个单词组成：
										第一种写法(kebab-case命名，有些UI组件库这么写)：atguigu-school
										第二种写法(CamelCase命名，推荐)：AtguiguSchool
							备注：可以使用name配置项指定组件在开发者工具中呈现的名字。

				2.关于组件标签:
							第一种写法：<组件名></组件名> 
							第二种写法：<组件名/>
		 -->
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			// 创建一个Person组件
			let Person = Vue.extend({
				name:'Person',
				template:`
					<div>
						<h1>人员信息</h1>
						<h3>姓名：{{name}}</h3>
						<h3>年龄：{{age}}</h3>
						<button @click="showPersonInfo">点我提示人员信息</button>
					</div>
				`,
				data(){
					return {
						name:'张三',
						age:18
					}
				},
				methods:{
					showPersonInfo(){
						alert(`我叫${this.name}，我今年${this.age}岁了`)
					}
				}
			})

			// 创建一个School组件
			let b = Vue.extend({
				template:`
					<div>
						<h1>学校信息</h1>
						<h3>校名：{{name}}</h3>
						<h3>地址：{{address}}</h3>
						<button @click="showSchoolInfo">点我提示学校信息</button>
					</div>
				`,
				data(){
					return {
						name:'尚硅谷',
						address:'宏福科技园'
					}
				},
				methods:{
					showSchoolInfo(){
						alert(`${this.name}，坐落于：${this.address}`)
					}
				}
			})
				
			// 创建一个App组件
			let App = Vue.extend({
				components:{Person,'atguigu-school':b},
				template:`
					<div>
						<Person/>
						<hr>
						<atguigu-school/>
					</div>
				`
			})
			
			//创建一个vm
			new Vue({
				el:'#demo',
				components:{app:App},
				template:`<app/>`,
			})
			
		</script>
	</body>
</html>